<template>
  <div id="cost">
    <el-row>
      <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
        <el-input v-model="addInput" placeholder="请输入收款单位"></el-input>
      </el-col>
      <el-col :xs="4" :sm="4" :md="5" :lg="5" :xl="4">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <!-- <el-button type="info" @click="reset">重置</el-button> -->
          <el-button type="danger" plain @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <Ctable></Ctable>
          <Page></Page>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Ctable from '../ygr/Ctable.vue'
import Page from '../../common/Page.vue'
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'Cost',
  components: {
    Ctable,
    Page
  },
  data() {
    return {
      addInput: ''
    }
  },
  methods: {
     ...mapActions(['expend/opList', 'expend/getLists']),
     search() { //搜索
      if (this.addInput) { //不为空
        let id ;
        this.$store.state.table.allList.forEach(item=>{
          if ( item.sup.suppliername==this.addInput) {
            id=item.id;
            return;
          }
        })
        console.log(id)
        if (id) {
          this['expend/getLists']([url.findCBData,{id:id}])
        }else {
          this.$message({
            type: 'danger',
            message: '没有该收款单位!'
          })
        }
      }else {
        this.$message({
            type: 'danger',
            message: '内容不能为空!'
          })
      }
    },
    reset() { //重置（重新获取请求数据列表）
      this['expend/getLists']([url.getCBData])
      this.addInput = '' //清空输入框内容
    }
  },
  created() {
    this['expend/getLists']([url.getCBData])
    console.log('成本管理创建')
  },
  destroyed() {
    console.log('成本管理销毁')
  },

}

</script>

<style lang="less" scoped>
#cost {
  .el-row {
    margin-top: 10px;
  }
}

</style>
